<template>
  <t-form ref="form" class="item-container" :data="formData" :rules="FORM_RULES" label-width="0" @submit="onSubmit">
    <t-tabs v-model="value">
      <t-tab-panel :value="1" label="通过邮箱找回密码">
        <!-- 账号密码登录 -->
        <div class="form">
          <t-form-item name="account">
            <t-input
              v-model="formData.account"
              size="large"
              placeholder="请输入您的邮箱"
              clearable
              :maxlength="50"
              @blur="testEmail"
            >
              <template #prefix-icon>
                <mail-icon />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item class="verification-code" name="code">
            <t-input
              v-model="formData.code"
              size="large"
              placeholder="请输入验证码"
              key="code"
              class="verify-inp"
              clearable
            />
            <t-button variant="outline" :disabled="countDown > 0" @click="sendEmailCode" class="verify-btn">
              {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
            </t-button>
          </t-form-item>
          <t-form-item name="newPassword1">
            <t-input
              v-model="formData.newPassword1"
              size="large"
              clearable
              key="newPassword1"
              placeholder="请输入新密码"
              type="password"
            >
              <template #prefix-icon>
                <lock-on-icon />
              </template>
              <template #suffix-icon>
                <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse" />
                <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off" />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item name="newPassword2">
            <t-input
              v-model="formData.newPassword2"
              size="large"
              clearable
              key="newPassword2"
              placeholder="请再次输入新密码"
              type="password"
            >
              <template #prefix-icon>
                <lock-on-icon />
              </template>
              <template #suffix-icon>
                <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse" />
                <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off" />
              </template>
            </t-input>
          </t-form-item>
        </div>
      </t-tab-panel>
      <t-tab-panel :value="2" label="通过手机号找回密码">
        <!-- 手机快捷登录 -->
        <div class="form">
          <t-form-item name="phone">
            <t-input
              v-model="formData.phone"
              size="large"
              placeholder="请输入您的手机号"
              :maxlength="11"
              @blur="testPhone"
              clearable
            >
              <template #prefix-icon>
                <mobile-icon />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item class="verification-code" name="code">
            <t-input
              v-model="formData.code"
              size="large"
              placeholder="请输入验证码"
              key="code"
              class="verify-inp"
              clearable
            />
            <t-button variant="outline" :disabled="countDown > 0" @click="sendCode" class="verify-btn">
              {{ countDown == 0 ? '发送验证码' : `${countDown}秒后可重发` }}
            </t-button>
          </t-form-item>
          <t-form-item name="newPassword1">
            <t-input
              v-model="formData.newPassword1"
              size="large"
              clearable
              key="newPassword1"
              placeholder="请输入新密码"
              type="password"
            >
              <template #prefix-icon>
                <lock-on-icon />
              </template>
              <template #suffix-icon>
                <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse" />
                <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off" />
              </template>
            </t-input>
          </t-form-item>
          <t-form-item name="newPassword2">
            <t-input
              v-model="formData.newPassword2"
              size="large"
              clearable
              key="newPassword2"
              placeholder="请再次输入新密码"
              type="password"
            >
              <template #prefix-icon>
                <lock-on-icon />
              </template>
              <template #suffix-icon>
                <browse-icon v-if="showPsw" @click="showPsw = !showPsw" key="browse" />
                <browse-off-icon v-else @click="showPsw = !showPsw" key="browse-off" />
              </template>
            </t-input>
          </t-form-item>
        </div>
      </t-tab-panel>
    </t-tabs>
    <div class="check-container remember-pwd">
      <t-checkbox v-model="checked">
        <span>
          我已阅读并同意
          <a href="https://www.pis360.com/privacy-policy" target="_blank" style="margin-right: 0">隐私政策</a>
          和
          <a href="https://www.pis360.com/agreement" target="_blank">用户协议</a>
        </span>
      </t-checkbox>
    </div>
    <t-form-item class="btn-container">
      <t-button block size="large" type="submit" :disabled="request"> 确定 </t-button>
    </t-form-item>
  </t-form>
</template>
<script lang="ts">
import Vue from 'vue';
// import QrcodeVue from 'qrcode.vue';
import { LockOnIcon, BrowseOffIcon, BrowseIcon, MailIcon, MobileIcon } from 'tdesign-icons-vue';
import { requestRetrievePassword, emailVerificationCode, verificationCode } from '@/service/login/index';
import CryptoJS from 'crypto-js';

const INITIAL_DATA = {
  phone: '',
  account: '',
  code: '',
  newPassword1: '',
  newPassword2: '',
};
const FORM_RULES = {
  phone: [{ required: true, message: '手机号必填', type: 'error' }],
  account: [{ required: true, message: '账号必填', type: 'error' }],
  code: [{ required: true, message: '验证码必填', type: 'error' }],
  newPassword1: [{ required: true, message: '新密码必填', type: 'error' }],
  newPassword2: [{ required: true, message: '新密码必填', type: 'error' }],
};

/** 高级详情 */
export default Vue.extend({
  name: 'Login',
  components: {
    LockOnIcon,
    BrowseOffIcon,
    BrowseIcon,
    MailIcon,
    MobileIcon,
  },
  data() {
    return {
      request: false,
      checked: false,
      value: 1,
      FORM_RULES,
      // type: 'code',
      formData: { ...INITIAL_DATA },
      showPsw: false,
      countDown: 0,
      intervalTimer: null,
    };
  },
  watch: {
    value() {
      this.formData.newPassword1 = '';
      this.formData.newPassword2 = '';
      this.formData.code = '';
      this.formData.phone = '';
      this.formData.account = '';
    },
  },
  beforeDestroy() {
    clearInterval(this.intervalTimer);
  },
  methods: {
    async onSubmit({ validateResult }) {
      let information = '';
      // const {code}=this.formData.code
      if (this.value === 1) {
        information = this.formData.account;
      } else {
        information = this.formData.phone;
      }

      // 判断密码是否一致
      if (this.formData.newPassword1 !== this.formData.newPassword2) {
        this.$message.error('新密码不一致');
        return;
      }
      const password = CryptoJS.MD5(this.formData.newPassword1).toString();
      const { code } = this.formData;
      if (validateResult === true) {
        if (!this.checked) {
          this.$message.error('请同意英斯盾隐私政策和用户协议');
          return;
        }
        await requestRetrievePassword({ code, information, password }).then((res) => {
          if (res.data === 200) {
            this.$message.success('密码修改成功');
            this.$router.push('/login');
            this.request = true;
          }
        });
      }
    },
    // 邮箱验证码
    async sendEmailCode() {
      const email = this.formData.account;
      await emailVerificationCode({ email });
      this.countDown = 60;
      this.intervalTimer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown -= 1;
        } else {
          clearInterval(this.intervalTimer);
          this.countDown = 0;
        }
      }, 1000);
    },
    // 手机验证码
    async sendCode() {
      const { phone } = this.formData;
      await verificationCode({ phone });
      this.countDown = 60;
      this.intervalTimer = setInterval(() => {
        if (this.countDown > 0) {
          this.countDown -= 1;
        } else {
          clearInterval(this.intervalTimer);
          this.countDown = 0;
        }
      }, 1000);
    },
    testPhone() {
      // 判断手机号是否正确
      const phoneNumber = /^1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8}$/;
      if (this.formData.phone !== '' && !phoneNumber.test(this.formData.phone)) {
        this.$message.error('手机号不正确');
      }
    },
    testEmail() {
      // 判断邮箱是否正确
      const email = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
      if (this.formData.account !== '' && !email.test(this.formData.account)) {
        this.$message.error('邮箱不正确');
      }
    },
  },
});
</script>

<style lang="less" scoped>
@media screen and (min-width: 768px) {
  .check-container {
    width: 375px !important;
  }
  .btn-container {
    width: 375px !important;
    margin-top: 24px;
  }
  /deep/.t-tabs {
    width: 375px !important;
  }

  .form {
    width: 375px !important;
    padding-top: 14px;
    // margin-bottom: 16px;
    margin-bottom: 20px;
    .verify-inp {
      margin-right: 20px;
    }
    .verify-btn {
      width: 40%;
    }
  }
  /deep/.check-container .remember-pwd {
    margin-top: 10px !important;
  }
}
@media screen and (max-width: 768px) {
  /deep/.t-tabs__content {
    margin-bottom: 24px;
  }
}
</style>
